import CloudIcons from '@/assets/ImageUrlConfig'
import { View, Text, Image } from '@tarojs/components'
import { setNavigationBarTitle, navigateTo, showToast } from '@tarojs/taro'
import { useState } from 'react'
import './index.scss'
import { useDispatch, useSelector } from 'react-redux'
import { AddArticleApi } from '@/api/index.js'

import ArticleList from '../article-list/index'

export default function SpacePage({ showArticleOperationDrawer, showSpaceListDrawer, sethomeConpClassName }) {
	const dispatch = useDispatch()
	const spaceStore = useSelector((state) => state.space)
	/**
	 * 向左滑动，关闭当前页面，回到index页面默认状态
	 */
	const [spaceTouchStart, setSpaceTouchStart] = useState({
		x: 0,
		y: 0,
		timeStart: 0,
	})
	const onTouchStart = (e) => {
		const { clientX, clientY } = e.touches[0]
		setSpaceTouchStart({
			x: clientX,
			y: clientY,
			timeStart: new Date().getTime(),
		})
	}
	const onTouchEnd = (e) => {
		const { clientX } = e.changedTouches[0]
		const timeEnd = new Date().getTime()
		const { x, y, timeStart } = spaceTouchStart
		const timeDifference = (timeEnd - timeStart) / 1000 // 单位 s
		const speed = (x - clientX) / timeDifference
		if (speed <= 50 || timeDifference > 2) return
		backToHomeDefault()
	}
	const backToHomeDefault = () => {
		sethomeConpClassName('home default')
		setNavigationBarTitle({ title: '首页' })
	}
	/**
	 * 是否展示空间里列表
	 */
	const [isShowSpaceList, setIsShowSpaceList] = useState(true)
	/**
	 * 空间列表开关
	 */
	const trigglerSpaceList = () => {
		setIsShowSpaceList(!isShowSpaceList)
	}
	/**
	 * 创建新的文章
	 * @param {Event} event
	 */
	const createNewArticle = (event) => {
		event.stopPropagation()
		navigateTo({
			url: `/pages/write/index`,
			events: {
				reciveArticle({ title, content }) {
					const spaceid = spaceStore._id
					AddArticleApi({
						title,
						content,
						spaceid,
					})
						.then(({ space }) => {
							dispatch({
								type: 'UPDATE_SPACE',
								payload: space,
							})
						})
						.catch(() => {
							showToast({
								title: '上传失败',
								icon: 'error',
								duration: 1000,
							})
						})
				},
			},
		})
	}
	/**
	 * 导航到回收站
	 */
	const navigateToRecycle = () => {
		console.log('去回收站')
	}

	return (
		<View className='space-page' onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
			<View className='title' onTap={showSpaceListDrawer}>
				<View className='space-name'>{spaceStore?.name}</View>
				<Image src={CloudIcons.code} className='change-sapce-icon'></Image>
			</View>
			<View className='scroll-content'>
				<View className='space-list-switch' onClick={trigglerSpaceList}>
					<Text className='text'>我的文章</Text>
					<Image src={CloudIcons.spread} className={isShowSpaceList ? 'icon spread' : 'icon shrink'}></Image>
					<Image src={CloudIcons.add2} className='add' onClick={createNewArticle}></Image>
				</View>
				<View className={isShowSpaceList ? 'space-list' : 'space-list hiden'}>
					<ArticleList
						backToHomeDefault={backToHomeDefault}
						showArticleOperationDrawer={showArticleOperationDrawer}
					></ArticleList>
				</View>
			</View>
			<View className='footer'>
				{/* <View className='flex' onTap={navigateToRecycle}>
					<Image className='recycle-icon' src={CloudIcons.delete2}></Image>
					<Text className='recycle'>回收站</Text>
				</View> */}
			</View>
		</View>
	)
}
